<script setup>
import { computed, defineProps, ref } from "vue";
const props = defineProps(["meta", "vm"]);
const { meta, vm } = props;
const targetModel = meta.model || "~";

const filterModel = ref({
  "control": "object",
  "cols": 5,
  "sel_scene": defaultSceneName(),
  "scenes": meta.filter?.scenes || []
});

const items = computed(() => {
  return filterItems(filterModel.value.sel_scene || defaultSceneName());
});

function filterItems(sceneName) {
  let items = [];
  if (sceneName != null) {
    let scenes = meta.filter?.scenes;
    let thisScene = null;
    if (scenes) {
      for (var i = 0; i < scenes.length; i++) {
        if (scenes[i].name == sceneName) {
          thisScene = scenes[i];
          break;
        }
      }
    }
    if (thisScene && thisScene.items) {
      thisScene.items.forEach(x => {
        items.push(x);
      })
    }
  }
  return items;
}

function defaultSceneName() {
  let scenes = meta.filter?.scenes;
  if (scenes && scenes.length > 0) {
    return scenes[0].name;
  } else {
    return null;
  }
}

function handleListQuery() {
  let condition = [];
  let filterInputs = items.value;
  filterInputs.forEach(x => {
    if (isInclude(x)) {
      condition.push({
        "field": x.field || x.name,
        "op": x.op || "eq",
        "value": x.value
      })
    }
  });
  let gridModel = vm.getModel(targetModel);
  if (gridModel) {
    gridModel.condition = condition;
    gridModel.pageIndex = 1;
  }

  vm.execute("list", {
    condition
  });
}

function isInclude(filterItem) {
  return !(filterItem.value == null || filterItem.value == "")
}

</script>
<template>
  <el-header style="height: 120px;">
    <el-scrollbar>
      <el-container>
        <el-container>
          <el-header style="height: 24px;">
            <el-row>
              <el-col :span="5">
                <el-select v-model="filterModel.sel_scene" placeholder="查询方案" @chang="onSceneChanged">
                  <el-option v-for="s in filterModel.scenes" :key="s.id" :label="s.title" :value="s.name" />
                </el-select>
              </el-col>
            </el-row>
          </el-header>
          <el-main>
            <el-form :inline="true">
              <el-form-item v-for="item in items" :label="item.title">
                <el-input v-model="item.value" :placeholder="item.title" clearable />
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <el-aside style="width:80px" class="m-4">
          <center>
            <div><el-button @click="handleListQuery">查 询</el-button></div>
            <div><el-button>重 置</el-button></div>
          </center>
        </el-aside>
      </el-container>
    </el-scrollbar>
  </el-header>
</template>